<template>
  <div class='rank'>
    <!-- 顶部菜单 -->
    <div class="top-bar">
      <div class="mu-appbar mu-paper-1 flex" color="primary" style="width: 100%;">
        <router-link to="/main/index"><i class="fa fa-chevron-left icon"></i></router-link>
        <div class="paddingtop-title">
          <span class="b" @click="showpop=!showpop">{{title}}
            <i v-if="title" class="fa fa-caret-down"></i>
          </span>
        </div>
        <a class="" @click="goTop">
          <i class="fa fa-angle-double-up icon"></i>
        </a>
      </div>
      <div class="menupop flex animated" :class="{'fadeInDown':showpop,'fadeOutUp':!showpop}">
        <div @click='onRank(menu.href)' class='menu-item' :class='{"active":menu.title==title}' v-for="menu in menus"
          :key="menu.id">
          {{ menu.title }}
        </div>
      </div>
      <div class="mask" v-show="showpop" @click='hidepop'></div>
    </div>
    <div v-if="rankTitle" class="rank_menu b flex animated" :class="{'flipInX':showRanktype,'flipOutX':!showRanktype}"
      ref="rankMenu">
      <div class="rank_menu_title">
        {{rankTitle}}
      </div>
      <small>
        <router-link to="/main/index">更多</router-link>
      </small>
    </div>
    <div class="rank-content">
      <header class='type flex'>
        <div class='type-item' @click='chooseType(index)' :class="{'active':curTab==index}" v-for="rank,index in ranks"
          :key="rank.id">
          {{ rank.title }}
        </div>
      </header>
      <div ref="content" class="type-content flex flex-nowrap justify-content-start">
        <div v-for="rank in rankContent" class='flex flex-row w100' :key="rank.id">
          <div class="flex rankBox" @scroll.native=handleScroll>
            <div v-for="item,index in rank.rankItem" class='rank-type' :key="item.id">
              <div class="rank_title b flex" :data-ranktitle='item.title'>
                <div class="rank_menu_title">
                  {{ item.title }}
                </div>
                <small>更多</small>
              </div>
              <mu-divider></mu-divider>
              <!-- 排列前三 -->
              <div class="flex rankTop">
                <div @click='goRead(top.href)' class="topItem flex flex-column" v-for="top in item.tops" :key="top.id">
                  <div class="pic">
                    <img v-if="top.href" onerror='this.src="/public/images/error.png"' :src="`${'https://image.mhxk.com/mh/'+top.href.replace(/\D/g, '')+'.jpg-noresize.webp'}`">
                    <div class='topDesc flex flex-column'>
                      <span>{{top.name}}</span>
                      <span class='grey'><small>{{top.author}}</small></span>
                    </div>
                  </div>
                </div>
              </div>
              <mu-list>
                <mu-list-item @click='goRead(mh.href)' avatar button :ripple="false" v-for="mh in item.list" :key="mh.id">
                  <mu-list-item-action>
                    <mu-avatar :size='28'>
                      <!-- <img :src="'//image.mhxk.com/mh/'+mh.href | getnum +'.jpg-noresize.webp'"> -->
                      <img v-lazy="`${'https://image.mhxk.com/mh/'+mh.href.replace(/\D/g, '')+'.jpg-noresize.webp'}`">
                    </mu-avatar>
                  </mu-list-item-action>
                  <mu-list-item-title>
                    <span>{{mh.name}}</span>
                    <span class='author'>{{mh.author}}</span>
                  </mu-list-item-title>
                  <mu-list-item-action>
                    <div class='flex mh_des flex-column'>
                      <span>
                        <i class="fa fa-free-code-camp    "></i>
                        {{mh.hot}}</span>
                      <span class='author'>{{mh.type}}</span>
                    </div>
                  </mu-list-item-action>
                </mu-list-item>
              </mu-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  @import './rank';

</style>
<script>
  export default {
    data() {
      return {
        menus: [],
        ranks: [],
        rankContent: [],
        rankItemTitle: [],
        rankItemTitleTop: [],
        title: '',
        rankTitle: '',
        showRanktype: false,
        curTab: 0,
        showpop: false,
        screenWidth: window.screen.availWidth,
      };
    },
    methods: {
      goTop() {
        document.querySelectorAll('.rankBox')[this.curTab].scrollTop = 0;
      },
      goRead(href) {
        let comicId = href.replace(/\D/g, '');
        this.$router.push({
          path: '/main/comicInfo',
          query: {
            comicId: comicId
          }
        });
      },
      onRank(href) {
        this.getSortMh(href);
      },
      hidepop() {
        this.showpop = false
      },
      //   选择类型
      chooseType(index) {
        this.rankItemTitle = [];
        this.rankItemTitleTop = [];
        let curW = this.screenWidth * index * -1;
        this.curTab = index;
        this.$refs.content.style.transform = `translate(${curW}px, 0) scale(1) translateZ(0)`;
        this.rankContent[index].rankItem.map(item => {
          this.rankItemTitleTop.push(document.querySelector(`.rank_title[data-ranktitle='${item.title}']`).getBoundingClientRect()
            .top);
          this.rankItemTitle.push(item.title);
        })
      },
      //   滚动
      handleScroll() {
        let curTop = document.querySelectorAll('.rankBox')[this.curTab].scrollTop + 5;
        if (curTop > 40 && !this.showRanktype) {
          this.showRanktype = true;
        } else if (curTop == 5) {
          this.showRanktype = false;
        }
        this.rankItemTitleTop.forEach((item, index) => {
          if (curTop > item && curTop < this.rankItemTitleTop[index + 1]) {
            this.rankTitle = this.rankItemTitle[index];
          }
        })
        return false;
      },
      getSortMh(type) {
        this.$progress.start();
        // 获取当前排行信息
        this.$http.get('http://y.yuduo.top/index/manhua/getSort?type=' + type).then(res => {
          let tempArr = res.data[0];
          this.menus = tempArr.menu;
          this.ranks = tempArr.rank;
          this.rankContent = tempArr.rankConent;
          this.title = tempArr.title;
          setTimeout(() => {
            this.chooseType(0);
          }, 3000);
          this.$progress.done();
          this.showpop = false;
        })
      },
    },
    mounted() {
      this.getSortMh('/top/dianji.html');
      let resizeTag = true
      window.onresize = () => {
        if (resizeTag) {
          resizeTag = false
          setTimeout(() => {
            resizeTag = true;
            this.screenWidth = document.documentElement.clientWidth;
            let curW = this.screenWidth * this.curTab * -1;
            this.$refs.content.style.transform = `translate(${curW}px, 0) scale(1) translateZ(0)`
          }, 300)
        }
      }
      //   window.addEventListener('scroll', this.$refs.content, true)
    },
    created() {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.handleScroll, true);
      })
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll, true)
    }
  };

</script>
